<!--组织架构弹窗-->
<template>
  <dialogBody @confirm="confirm" @cancel="cancel" ref="body">
    <template slot="title">单位信息</template>
    <div style="padding-top: 15px;">
      <div class="formContainer">
        <label><span class="required">*</span>类型</label>
        <label
          ><input type="radio" name="type" value="0" v-model="result.type" />
          企业/单位
        </label>
        <label
          ><input type="radio" name="type" value="1" v-model="result.type" />
          组织架构
        </label>
      </div>
      <div class="box">
        <div v-if="result.type == 0">
          <div class="formContainer">
            <label><span class="required">*</span>单位名称</label>
            <input type="text" v-model.trim="result.name" />
          </div>
          <div class="formContainer">
            <label>全称</label>
            <input type="text" v-model="result.fullName" />
          </div>
          <div class="formContainer">
            <label>编号</label>
            <input type="text" v-model="result.unitCode" />
          </div>
          <div class="formContainer">
            <label>负责人</label>
            <input type="text" v-model="result.leader" />
          </div>
          <div class="formContainer">
            <label>联系方式</label>
            <input type="text" v-model="result.phoneNum" />
          </div>
          <div class="formContainer">
            <label>接入时间</label>
            <span
              class="selectDate"
              @click.stop="$refs.datepicker.show()"
              ref="joinTime"
              >{{ new Date(result.joinTime).formatByTime() }}</span
            >
          </div>
          <div class="formContainer">
            <label>合同到期时间</label>
            <span
              class="selectDate"
              @click.stop="$refs.datepicker2.show()"
              ref="expirationTime"
              >{{ new Date(result.expirationTime).formatByTime() }}</span
            >
          </div>
          <div class="formContainer">
            <label>电房数量</label>
            <input
              type="number"
              v-model="result.roomCount"
              min="0"
              @keydown="keydownFloat($event)"
            />
          </div>
          <div class="formContainer">
            <label>变压器数量</label>
            <input
              type="number"
              v-model="result.transformerCount"
              min="0"
              @keydown="keydownFloat($event)"
            />
          </div>
          <div class="formContainer">
            <label>变压器总容量</label>
            <input
              type="number"
              v-model="result.capacity"
              min="0"
              @keydown="keydownFloat($event)"
            /><label>（单位：KVA）</label>
          </div>
          <div class="formContainer">
            <label>负荷容量</label>
            <input
              type="number"
              v-model="result.loadCapacity"
              min="0"
              @keydown="keydownFloat($event)"
            /><label>（单位：KW）</label>
          </div>
          <div class="formContainer">
            <label>进线来源</label>
            <input type="text" v-model="result.inletWire" />
          </div>
          <div class="formContainer">
            <label>地址</label>
            <input type="textarea" v-model="result.address" />
          </div>
          <div class="formContainer">
            <label>地理坐标</label>
            <input ref="input" v-model="result.location" type="text" />
            <el-button type="primary" @click="addMap" class="last-el-button">坐标拾取</el-button>
          
          </div>
          <div class="formContainer">
            <label>备注</label>
            <textarea v-model.trim="result.memo"></textarea>
          </div>
        </div>
        <div v-else>
          <div class="formContainer">
            <label><span class="required">*</span>节点名称</label>
            <input type="text" v-model="result.name" />
          </div>
        </div>
      </div>
      <datePicker
        ref="datepicker"
        :initDate="new Date()"
        @selectDatetime="
          selectDate($event);
          $refs.datepicker.hide();
        "
        type="dayTime"
      ></datePicker>
      <datePicker
        ref="datepicker2"
        :initDate="new Date()"
        @selectDatetime="
          selectDate2($event);
          $refs.datepicker2.hide();
        "
        type="dayTime"
      ></datePicker>
      <baiduMapDialog
        ref="baiduMapDialog"
        @location="location"
      ></baiduMapDialog>
    </div>
  </dialogBody>
</template>

<script>
import dialogBody from "@/components/module/dialog/dialogBody.vue";
import datePicker from "@/components/module/universal/datePicker.vue";
import baiduMapDialog from "./baiduMapDialog.vue";
export default {
  components: {
    dialogBody,
    datePicker,
    baiduMapDialog,
  },
  props: {},
  data() {
    return {
      callback: undefined,
      result: {
        type: "0",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    selectDate(date) {
      this.result.joinTime = date.getTime();
      //this.$refs.joinTime.value = date.formatByDate('-')
    },
    selectDate2(date) {
      this.result.expirationTime = date.getTime();
      //this.$refs.expirationTime.value = date.formatByDate('-')
    },
    addMap() {
      this.$refs.baiduMapDialog.open((data) => {});
    },
    location(data) {
      this.$refs.input.value = data;
      this.result.location = data;
    },
    confirm() {
      if (this.result.type === "" || this.result.type == undefined) {
        this.$dialogMethod.showMessage("类型为必填项");
        return;
      }
      if (this.result.name == "" || this.result.name == undefined) {
        this.$dialogMethod.showMessage("名称为必填项");
        return;
      }
      if (this.callback != undefined) {
        this.callback(this.result);
      }

      this.close();
    },
    cancel() {
      this.close();
    },
    close() {
      this.result = {};
      this.$refs.body.hide();
    },
    open(data, callBack) {
      if (data == undefined) {
        this.result = {
          type: 0,
          joinTime: new Date().getTime(),
          expirationTime: new Date().getTime(),
        };
      } else {
        this.result = copy(data);
      }
      this.callback = callBack;
      this.$refs.body.open();
    },
    keydownFloat(ev) {
      if (ev.keyCode == 109 || ev.keyCode == 229) {
        ev.preventDefault();
      }
    },
  },
};
</script>
<style scoped>
.formContainer {
  margin-bottom: 12px;
}

.formContainer > label {
  min-width: 72px;
  text-align: right;
  display: inline-block;
  margin-right: 12px;
  line-height: 32px;
}

.formContainer > label > span {
  display: inline-block;
  width: 8px;
}

.required {
  color: red;
}

 .datepickerContainer {
  margin: 0 auto;
}

.formContainer > label {
  min-width: 85px;
}

.selectDate {
  display: inline-block;
  width: calc(100% - 220px);
  height: 36px;
  line-height: 34px;
  border: solid 1px silver;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 10px;
}

.box  input,
textarea {
  width: calc(100% - 240px);
}
</style>
